<template>
  <div class="tracking-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1>订单跟踪</h1>
        <p>实时跟踪订单状态：下单、出库、配送、完成</p>
      </div>
      <div class="header-right">
        <div class="stats-card">
          <div class="stat-item">
            <span class="stat-label">进行中</span>
            <span class="stat-value">{{ activeOrders }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">今日配送</span>
            <span class="stat-value">{{ todayDelivery }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索筛选 -->
    <div class="search-action-section">
      <div class="search-form">
        <div class="form-item">
          <label>订单号</label>
          <input 
            v-model="searchForm.orderCode" 
            type="text" 
            placeholder="请输入订单号"
            @keyup.enter="searchOrders"
          />
        </div>
        <div class="form-item">
          <label>客户姓名</label>
          <input 
            v-model="searchForm.customerName" 
            type="text" 
            placeholder="请输入客户姓名"
            @keyup.enter="searchOrders"
          />
        </div>
        <div class="form-item">
          <label>订单状态</label>
          <select v-model="searchForm.status">
            <option value="">全部状态</option>
            <option value="Pending">待处理</option>
            <option value="Processing">处理中</option>
            <option value="Shipped">已发货</option>
            <option value="Delivered">已送达</option>
            <option value="Cancelled">已取消</option>
          </select>
        </div>
        <div class="form-item">
          <label>开始日期</label>
          <input 
            v-model="searchForm.startDate" 
            type="date" 
            placeholder="开始日期"
          />
        </div>
        <div class="form-item">
          <label>结束日期</label>
          <input 
            v-model="searchForm.endDate" 
            type="date" 
            placeholder="结束日期"
          />
        </div>
        <div class="form-buttons">
          <button class="btn btn-primary" @click="searchOrders">
            <i class="fas fa-search"></i>
            搜索
          </button>
          <button class="btn btn-secondary" @click="resetSearch">
            <i class="fas fa-undo"></i>
            重置
          </button>
        </div>
      </div>
    </div>

    <!-- 订单列表和分页 -->
    <div class="table-pagination-section">
      <div class="section-header">
        <h2>订单列表</h2>
        <div class="view-options">
          <button 
            class="view-btn" 
            :class="{ active: viewMode === 'list' }"
            @click="viewMode = 'list'"
          >
            <i class="fas fa-list"></i>
            列表视图
          </button>
          <button 
            class="view-btn" 
            :class="{ active: viewMode === 'timeline' }"
            @click="viewMode = 'timeline'"
          >
            <i class="fas fa-stream"></i>
            时间线视图
          </button>
        </div>
      </div>

      <div class="table-container">

      <!-- 列表视图 -->
      <div v-if="viewMode === 'list'" class="orders-list">
        <div v-for="order in orders" :key="order.id" class="order-card">
          <div class="order-header">
            <div class="order-info">
              <h3>{{ order.orderCode }}</h3>
              <span class="order-date">{{ formatDate(order.orderDate) }}</span>
            </div>
            <div class="order-status">
              <span class="status" :class="(order.orderStatus || order.status || '').toLowerCase()">
                {{ getStatusText(order.orderStatus || order.status) }}
              </span>
            </div>
          </div>
          
          <div class="order-content">
            <div class="customer-info">
              <div class="info-item">
                <label>客户：</label>
                <span>{{ order.customerName || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>电话：</label>
                <span>{{ order.customerPhone || '未填写' }}</span>
              </div>
              <div class="info-item">
                <label>金额：</label>
                <span class="amount">¥{{ (order.finalAmount || 0).toFixed(2) }}</span>
              </div>
            </div>
            
            <div class="order-actions">
              <button class="btn-view" @click="viewOrderTracking(order)">
                <i class="fas fa-eye"></i>
                查看跟踪
              </button>
              <button class="btn-update" @click="updateOrderStatus(order)">
                <i class="fas fa-edit"></i>
                更新状态
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 时间线视图 -->
      <div v-if="viewMode === 'timeline'" class="timeline-view">
        <div v-for="order in orders" :key="order.id" class="timeline-order">
          <div class="timeline-header">
            <h3>{{ order.orderCode }}</h3>
            <span class="order-date">{{ formatDate(order.orderDate) }}</span>
            <span class="status" :class="(order.orderStatus || order.status || '').toLowerCase()">
              {{ getStatusText(order.orderStatus || order.status) }}
            </span>
          </div>
          
          <div class="timeline-content">
            <div class="tracking-timeline">
              <div v-for="(track, index) in order.trackingLogs || []" :key="index" class="timeline-item">
                <div class="timeline-dot" :class="track.statusType"></div>
                <div class="timeline-content-item">
                  <div class="timeline-title">{{ track.statusDescription }}</div>
                  <div class="timeline-time">{{ formatDateTime(track.timestamp) }}</div>
                  <div v-if="track.operatorName" class="timeline-operator">
                    操作人: {{ track.operatorName }}
                  </div>
                  <div v-if="track.location" class="timeline-location">
                    位置: {{ track.location }}
                  </div>
                  <div v-if="track.remark" class="timeline-remark">
                    {{ track.remark }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <button 
          class="page-btn" 
          :disabled="currentPage === 1"
          @click="currentPage--"
        >
          上一页
        </button>
        <span class="page-info">
          第 {{ currentPage }} 页，共 {{ totalPages }} 页
        </span>
        <button 
          class="page-btn" 
          :disabled="currentPage === totalPages"
          @click="currentPage++"
        >
          下一页
        </button>
      </div>
    </div>

    <!-- 订单跟踪详情弹窗 -->
    <div v-if="showTrackingModal" class="modal-overlay" @click="closeTrackingModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>订单跟踪详情</h2>
          <button class="close-btn" @click="closeTrackingModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div v-if="selectedOrder" class="order-details">
            <div class="order-info">
              <h3>{{ selectedOrder.orderCode }}</h3>
              <p>客户：{{ selectedOrder.customerName || '未填写' }}</p>
              <p>电话：{{ selectedOrder.customerPhone || '未填写' }}</p>
              <p>金额：¥{{ (selectedOrder.finalAmount || 0).toFixed(2) }}</p>
            </div>
            
            <div class="tracking-timeline">
              <div v-for="(track, index) in selectedOrder.trackingLogs || []" :key="index" class="timeline-item">
                <div class="timeline-dot" :class="track.statusType"></div>
                <div class="timeline-content-item">
                  <div class="timeline-title">{{ track.statusDescription }}</div>
                  <div class="timeline-time">{{ formatDateTime(track.timestamp) }}</div>
                  <div v-if="track.operatorName" class="timeline-operator">
                    操作人: {{ track.operatorName }}
                  </div>
                  <div v-if="track.location" class="timeline-location">
                    位置: {{ track.location }}
                  </div>
                  <div v-if="track.remark" class="timeline-remark">
                    {{ track.remark }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态更新弹窗 -->
    <div v-if="showStatusModal" class="modal-overlay" @click="closeStatusModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>更新订单状态</h2>
          <button class="close-btn" @click="closeStatusModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div v-if="selectedOrder" class="status-form">
            <div class="form-group">
              <label>当前状态</label>
              <span class="current-status" :class="(selectedOrder.orderStatus || selectedOrder.status || '').toLowerCase()">
                {{ getStatusText(selectedOrder.orderStatus || selectedOrder.status) }}
              </span>
            </div>
            
            <div class="form-group">
              <label>新状态</label>
              <select v-model="statusUpdateForm.statusType">
                <option value="下单">下单</option>
                <option value="出库">出库</option>
                <option value="配送">配送</option>
                <option value="完成">完成</option>
                <option value="取消">取消</option>
              </select>
            </div>
            
            <div class="form-group">
              <label>状态描述</label>
              <textarea 
                v-model="statusUpdateForm.statusDescription" 
                placeholder="请输入状态描述"
                rows="3"
              ></textarea>
            </div>
            
            <div class="form-group">
              <label>位置信息</label>
              <input 
                v-model="statusUpdateForm.location" 
                type="text" 
                placeholder="请输入位置信息"
              />
            </div>
            
            <div class="form-group">
              <label>操作员姓名</label>
              <input 
                v-model="statusUpdateForm.operatorName" 
                type="text" 
                placeholder="请输入操作员姓名"
              />
            </div>
            
            <div class="form-group">
              <label>备注</label>
              <textarea 
                v-model="statusUpdateForm.remark" 
                placeholder="请输入备注信息"
                rows="2"
              ></textarea>
            </div>
            
            <div class="form-actions">
              <button class="btn-cancel" @click="closeStatusModal">取消</button>
              <button class="btn-save" @click="saveStatusUpdate">保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'

export default {
  name: 'OrderTrackingIndex',
  setup() {
    // 响应式数据
    const orders = ref([])
    const activeOrders = ref(0)
    const todayDelivery = ref(0)
    const currentPage = ref(1)
    const totalPages = ref(1)
    const viewMode = ref('list')
    const showTrackingModal = ref(false)
    const showStatusModal = ref(false)
    const selectedOrder = ref(null)
    
    // 搜索表单
    const searchForm = ref({
      orderCode: '',
      customerName: '',
      status: '',
      startDate: '',
      endDate: ''
    })
    
    // 状态更新表单
    const statusUpdateForm = ref({
      statusType: '',
      statusDescription: '',
      location: '',
      operatorName: '',
      remark: ''
    })
    
    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        'Pending': '待处理',
        'Processing': '处理中',
        'Shipped': '已发货',
        'Delivered': '已送达',
        'Cancelled': '已取消'
      }
      return statusMap[status] || status || '待处理'
    }
    
    // 格式化日期
    const formatDate = (date) => {
      if (!date) return '未设置'
      return new Date(date).toLocaleDateString('zh-CN')
    }
    
    // 格式化日期时间
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '未设置'
      return new Date(dateTime).toLocaleString('zh-CN')
    }
    
    // 加载订单列表
    const loadOrders = async () => {
      try {
        const response = await fetch('/api/retail/orders', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        
        if (response.ok) {
          const data = await response.json()
          orders.value = data.content || data.orders || []
          
          // 为每个订单加载跟踪记录
          for (let order of orders.value) {
            await loadOrderTracking(order)
          }
        } else {
          console.error('加载订单列表失败:', response.statusText)
        }
      } catch (error) {
        console.error('加载订单列表失败:', error)
      }
    }
    
    // 加载订单跟踪记录
    const loadOrderTracking = async (order) => {
      try {
        const response = await fetch(`/api/retail/tracking/order/${order.id}`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        
        if (response.ok) {
          const data = await response.json()
          order.trackingLogs = data || []
        } else {
          console.error('加载跟踪记录失败:', response.statusText)
          order.trackingLogs = []
        }
      } catch (error) {
        console.error('加载跟踪记录失败:', error)
        order.trackingLogs = []
      }
    }
    
    // 搜索订单
    const searchOrders = () => {
      // 这里可以实现搜索逻辑
      loadOrders()
    }
    
    // 重置搜索
    const resetSearch = () => {
      searchForm.value = {
        orderCode: '',
        customerName: '',
        status: '',
        startDate: '',
        endDate: ''
      }
      loadOrders()
    }
    
    // 查看订单跟踪
    const viewOrderTracking = (order) => {
      selectedOrder.value = order
      showTrackingModal.value = true
    }
    
    // 更新订单状态
    const updateOrderStatus = (order) => {
      selectedOrder.value = order
      statusUpdateForm.value = {
        statusType: '',
        statusDescription: '',
        location: '',
        operatorName: '',
        remark: ''
      }
      showStatusModal.value = true
    }
    
    // 保存状态更新
    const saveStatusUpdate = async () => {
      try {
        const trackingData = {
          orderId: selectedOrder.value.id,
          statusType: statusUpdateForm.value.statusType,
          statusDescription: statusUpdateForm.value.statusDescription,
          location: statusUpdateForm.value.location,
          operatorName: statusUpdateForm.value.operatorName,
          remark: statusUpdateForm.value.remark
        }
        
        const response = await fetch('/api/retail/tracking', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          },
          body: JSON.stringify(trackingData)
        })
        
        if (response.ok) {
          // 重新加载跟踪记录
          await loadOrderTracking(selectedOrder.value)
          closeStatusModal()
          alert('状态更新成功！')
        } else {
          alert('状态更新失败！')
        }
      } catch (error) {
        console.error('状态更新失败:', error)
        alert('状态更新失败！')
      }
    }
    
    // 关闭跟踪弹窗
    const closeTrackingModal = () => {
      showTrackingModal.value = false
      selectedOrder.value = null
    }
    
    // 关闭状态弹窗
    const closeStatusModal = () => {
      showStatusModal.value = false
      selectedOrder.value = null
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      loadOrders()
    })
    
    return {
      orders,
      activeOrders,
      todayDelivery,
      currentPage,
      totalPages,
      viewMode,
      showTrackingModal,
      showStatusModal,
      selectedOrder,
      searchForm,
      statusUpdateForm,
      getStatusText,
      formatDate,
      formatDateTime,
      searchOrders,
      resetSearch,
      viewOrderTracking,
      updateOrderStatus,
      saveStatusUpdate,
      closeTrackingModal,
      closeStatusModal
    }
  }
}
</script>

<style scoped>
.tracking-container {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
}

.tracking-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 25px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.header-left h1 {
  margin: 0 0 10px 0;
  font-size: 32px;
  color: white;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.header-left p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.stats-card {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 16px 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.stat-label {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
  font-weight: 500;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.search-action-section {
  background: rgba(255, 255, 255, 0.95);
  padding: 25px 30px;
  border-radius: 16px;
  margin-bottom: 25px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.search-action-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.search-form {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.form-item input,
.form-item select,
.form-item textarea {
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  font-size: 14px;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-item input:focus,
.form-item select:focus,
.form-item textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.form-item input:hover,
.form-item select:hover,
.form-item textarea:hover {
  border-color: #adb5bd;
  transform: translateY(-1px);
}

.date-separator {
  margin: 0 8px;
  color: #718096;
}

.form-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(240, 147, 251, 0.4);
}

.table-pagination-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  margin-bottom: 25px;
}

.table-pagination-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 50%, #43e97b 100%);
}

.table-container {
  overflow-x: auto;
  padding: 20px 20px 0 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #e2e8f0;
}

.section-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a202c;
}

.view-options {
  display: flex;
  gap: 8px;
}

.view-btn {
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-btn.active {
  background: #3182ce;
  color: white;
  border-color: #3182ce;
}

.orders-list {
  padding: 24px;
}

.order-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.2s;
}

.order-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
}

.order-info h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
}

.order-date {
  font-size: 14px;
  color: #718096;
}

.status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.status.pending {
  background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
  color: #c53030;
  border: 1px solid rgba(197, 48, 48, 0.3);
}

.status.processing {
  background: linear-gradient(135deg, #fef5e7 0%, #fed7aa 100%);
  color: #dd6b20;
  border: 1px solid rgba(221, 107, 32, 0.3);
}

.status.shipped {
  background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%);
  color: #2b6cb0;
  border: 1px solid rgba(43, 108, 176, 0.3);
}

.status.delivered {
  background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
  color: #2f855a;
  border: 1px solid rgba(47, 133, 90, 0.3);
}

.status.cancelled {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
  color: #4a5568;
  border: 1px solid rgba(74, 85, 104, 0.3);
}

.order-content {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer-info {
  display: flex;
  gap: 24px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-item label {
  font-size: 14px;
  color: #718096;
  font-weight: 500;
}

.info-item span {
  font-size: 14px;
  color: #2d3748;
}

.amount {
  font-weight: 600;
  color: #2d3748;
}

.order-actions {
  display: flex;
  gap: 12px;
}

.btn-view,
.btn-update {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-view {
  background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
  color: #234e52;
  box-shadow: 0 2px 8px rgba(35, 78, 82, 0.2);
}

.btn-view:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-update {
  background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
  color: #22543d;
  box-shadow: 0 2px 8px rgba(34, 84, 61, 0.2);
}

.btn-update:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.timeline-view {
  padding: 24px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 20px;
}

.timeline-order {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.timeline-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.timeline-content {
  padding: 16px;
}

.tracking-timeline {
  position: relative;
  padding-left: 24px;
}

.tracking-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.timeline-dot.下单 {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  border-color: #48bb78;
}

.timeline-dot.出库 {
  background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
  border-color: #3182ce;
}

.timeline-dot.配送 {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
  border-color: #ed8936;
}

.timeline-dot.完成 {
  background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
  border-color: #38a169;
}

.timeline-dot.取消 {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  border-color: #e53e3e;
}

.timeline-content-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.timeline-title {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.timeline-time {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.timeline-operator,
.timeline-location {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}

.timeline-remark {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: rgba(248, 249, 250, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.page-info {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

.page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  font-weight: 600;
}

.page-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-color: #667eea;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.modal-body {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.05);
}

.order-details h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.order-details p {
  margin: 0 0 8px 0;
  color: rgba(255, 255, 255, 0.9);
}

.status-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.current-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-cancel,
.btn-save {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-cancel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-cancel:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 100%);
  transform: translateY(-2px);
}

.btn-save {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-save:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
</style>
